<template>
  <div class="deviceDialog">
    <!-- 显示表详细信息 -->
    <el-dialog
      :visible.sync="isDeviceDetailInfo"
      v-bind:title="title"
      :close-on-click-modal="false"
      width="550px"
    >
      <tr>
        <td>
          <el-form
            label-position="left"
            label-width="100px"
            size="mini"
            ref="form"
            :model="deviceDetailInfo"
          >
            <el-form-item label="水表状态">
              <el-tag type="success" v-if="deviceDetailInfo.state === 0">正常</el-tag>
              <el-tag type="danger" v-if="deviceDetailInfo.state === 1">异常</el-tag>
            </el-form-item>
            <el-form-item label="表编号">
              <el-input v-model="deviceDetailInfo.deviceNo" readonly></el-input>
            </el-form-item>
            <el-form-item label="生产厂家">
              <el-input v-model="deviceDetailInfo.deviceVender" readonly></el-input>
            </el-form-item>
            <el-form-item label="IMEI 号">
              <el-input v-model="deviceDetailInfo.imei" readonly></el-input>
            </el-form-item>
            <el-form-item label="水表读数">
              <el-input v-model="deviceDetailInfo.readValue" readonly></el-input>
            </el-form-item>
            <!-- <el-form-item label="经度">
                            <el-input v-model="deviceDetailInfo.logitude" :readonly="!isModifyDeviceDetailInfo"></el-input>
                        </el-form-item>
                        <el-form-item label="纬度">
                            <el-input v-model="deviceDetailInfo.latitude" :readonly="!isModifyDeviceDetailInfo" style="width: 300px"></el-input>
                            <el-button @click="openMap()" type="warning" plain>点击查看地图</el-button>
            </el-form-item>-->
            <el-form-item label="口径">
              <el-input v-model="deviceDetailInfo.caliber" readonly></el-input>
            </el-form-item>
            <!-- <el-form-item label="阀门">
              <el-radio-group v-model="deviceDetailInfo.valve" disabled>
                <el-radio-button :label="0">关阀</el-radio-button>
                <el-radio-button :label="1">不定/无阀</el-radio-button>
                <el-radio-button :label="2">开阀</el-radio-button>
              </el-radio-group>
            </el-form-item> -->
            <el-form-item label="水表类型">
              <el-radio-group v-model="deviceDetailInfo.deviceType" disabled>
                <el-radio-button :label="1">集抄器</el-radio-button>
                <el-radio-button :label="2">NB-电信</el-radio-button>
                <el-radio-button :label="3">NB-移动</el-radio-button>
                <el-radio-button :label="4">Lora-wan</el-radio-button>
                <el-radio-button :label="5">IC卡</el-radio-button>
                <el-radio-button :label="6">机械表</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <!-- <el-form-item>
              <template>
                <el-button type="warning" plain @click="ckickChangeDevice(deviceDetailInfo)">更换该表</el-button>
                <el-button type="primary" plain @click="modifyDeviceDetailInfo()">修改信息</el-button>
                <el-button type="info" plain @click="cancelModifyDeviceDetailInfo()">取消修改</el-button>
                <el-button
                  type="success"
                  plain
                  @click="updateDeviceDetailInfo(deviceDetailInfo)"
                >保存修改</el-button>
              </template>
            </el-form-item>-->
          </el-form>
        </td>
      </tr>
      <!-- 换表 -->
      <el-dialog
        :visible.sync="isChangeDevice"
        title="换表"
        append-to-body
        :close-on-click-modal="false"
        width="550px"
      >
        <el-form label-position="left" label-width="100px" ref="form" :model="changeDeviceInfo">
          <el-form-item label="操作日期">
            <template>
              <span>{{changeDeviceInfo.installDate | dataFormat}}</span>
            </template>
          </el-form-item>
          <el-form-item label="操作员 Id">
            <el-input v-model="changeDeviceInfo.operatorId" disabled></el-input>
          </el-form-item>
          <!-- <el-form-item label="用户 ID">
            <el-input v-model="changeDeviceInfo.userId" disabled></el-input>
          </el-form-item>-->
          <!-- <el-form-item label="旧表编号">
            <el-input v-model="changeDeviceInfo.oldNo" disabled></el-input>
          </el-form-item>-->
          <el-form-item label="新表编号">
            <el-input v-model="changeDeviceInfo.newNo"></el-input>
          </el-form-item>
          <!-- <el-form-item label="旧表读数">
            <el-input v-model="changeDeviceInfo.oldVal" disabled></el-input>
          </el-form-item>-->
          <el-form-item label="新表读数">
            <el-input v-model="changeDeviceInfo.newVal"></el-input>
          </el-form-item>
          <el-form-item label="新表口径">
            <el-input v-model="changeDeviceInfo.caliber"></el-input>
          </el-form-item>
          <!-- <el-form-item label="旧表IMEI">
            <el-input v-model="changeDeviceInfo.oldImei" disabled></el-input>
          </el-form-item>-->
          <el-form-item label="新表IMEI">
            <el-input v-model="changeDeviceInfo.newImei"></el-input>
          </el-form-item>
          <el-form-item label="生产厂家">
            <el-input v-model="changeDeviceInfo.deviceVender"></el-input>
          </el-form-item>
          <el-form-item label="阀门">
            <el-radio-group v-model="changeDeviceInfo.valve">
              <el-radio-button :label="0">关阀</el-radio-button>
              <el-radio-button :label="1">不定/无阀</el-radio-button>
              <el-radio-button :label="2">开阀</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="水表类型">
            <el-radio-group v-model="changeDeviceInfo.deviceType">
              <el-radio-button :label="1">集抄器</el-radio-button>
              <el-radio-button :label="2">NB-电信</el-radio-button>
              <el-radio-button :label="3">NB-移动</el-radio-button>
              <el-radio-button :label="4">Lora-wan</el-radio-button>
              <el-radio-button :label="5">IC卡</el-radio-button>
              <el-radio-button :label="6">机械表</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <template>
              <el-button
                type="primary"
                plain
                @click="changeDevice(changeDeviceInfo)"
                style="float: right"
              >确定换表</el-button>
              <el-button
                type="info"
                plain
                @click="cancelChangeDevice()"
                style="float: right; margin-right: 20px"
              >取消换表</el-button>
            </template>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 在地图上查看表的位置 -->
      <!-- <el-dialog :visible.sync="isMap" title="当前表位置" center append-to-body width="80%" height="80%" :close-on-click-modal="false">
                <baidu-map class="map" :center="{lng, lat}" :scroll-wheel-zoom="true" :zoom="11" :enableMapClick="false">
                    <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
                    <bm-marker :position="{lng, lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
                </baidu-map>
      </el-dialog>-->
    </el-dialog>
  </div>
</template>

<script>
import bus from "./bus";
import {
  getDeviceDetailInfo,
  modifyDeviceDetailInfo,
  changeDevice
} from "../../../../api/api";
import filters from '../../../../filter/index';
export default {
  data() {
    return {
      title: "",
      isDeviceDetailInfo: false,
      isModifyDeviceDetailInfo: false,
      deviceDetailInfo: {},
      i: null,
      index: null,
      flag: null,
      // 换表
      isChangeDevice: false,
      changeDeviceInfo: {}
      // 地图
      // isMap: false,
      // lng: null,
      // lat: null,
    };
  },

  methods: {
    /**
     * 获取水表详细信息
     */
    getDeviceDetailInfo(msg) {
      let that = this;
      that.title = "表详细信息";
      that.isDeviceDetailInfo = true;
      that.isModifyDeviceDetailInfo = false;
      that.i = msg.i;
      that.index = msg.index;
      that.flag = msg.flag;
      let Msg = {
        deviceNo: msg.deviceNo,
        enprNo: 'esss',
        flag: msg.flag
      };
      getDeviceDetailInfo(Msg)
        .then(function(res) {
          if (res.data.code === "200") {
            that.deviceDetailInfo = res.data.data;
          } else {
            that.Error(
              "获取表" + row.deviceDetailList[i].deviceNo + "信息失败！"
            );
          }
        })
        .catch(function(err) {
          // that.Error(err);
        });
    },

    // 打开地图
    /* openMap() {
        let that = this;
        that.lng = that.deviceDetailInfo.logitude;
        that.lat = that.deviceDetailInfo.latitude;
        if(that.lng !== null && that.lng !== undefined && that.lat !== null && that.lat !== undefined) {
            that.isMap = true;
        } else {
            that.$alert('经纬度位空，无法定位到所查询表的位置 ！', '提示', {
                confirmButtonText: '确定',
                type: 'warning'
            });
        }
    }, */

    /**
     * 打开修改指定表的信息的弹框
     */
    modifyDeviceDetailInfo() {
      // alert("预做");
      let that = this;
      that.title = "修改表详细信息";
      that.isModifyDeviceDetailInfo = true;
    },

    // 取消修改表信息
    cancelModifyDeviceDetailInfo() {
      let that = this;
      that.isDeviceDetailInfo = false;
    },

    /**
     * 提交修改之后的表信息
     */
    updateDeviceDetailInfo(deviceDetailInfo) {
      let that = this;
      that
        .$confirm("此操作将修改表的信息，是否继续？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          modifyDeviceDetailInfo(deviceDetailInfo)
            .then(function(res) {
              if (res.data.code === "200") {
                that.Success("修改表信息成功 ！");
                /**
                 * 考虑是否需要向 right 页面传递此消息
                 */
                let deviceState = {
                  valve: deviceDetailInfo.valve,
                  index: that.index,
                  i: that.i
                };
                bus.$emit("deviceStateChange", deviceState);
              } else {
                that.Error("修改表信息失败 ！");
              }
            })
            .catch(function(err) {
              // that.Error(err);
            });
          that.isDeviceDetailInfo = false;
        })
        .catch(() => {
          that.Info("已取消修改！");
        });
    },

    /**
     * 打开换表页面
     */
    ckickChangeDevice(deviceDetailInfo) {
      let that = this;
      that.isChangeDevice = true;
      that.changeDeviceInfo.installDate = new Date();
      that.changeDeviceInfo.operatorId = sessionStorage.getItem("operatorId");
      that.changeDeviceInfo.userId = deviceDetailInfo.userId;
      that.changeDeviceInfo.oldNo = deviceDetailInfo.deviceNo;
      that.changeDeviceInfo.oldVal = deviceDetailInfo.readValue;
    },

    // 取消换表
    cancelChangeDevice() {
      let that = this;
      that.isChangeDevice = false;
      that.changeDeviceInfo = {};
    },

    /**
     * 提交换表的数据
     */
    changeDevice(changeDeviceInfo) {
      let that = this;
      changeDeviceInfo.enprNo = 'esss';
      that
        .$confirm("此操作将更换旧表，是否继续？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          changeDevice(changeDeviceInfo)
            .then(function(res) {
              if (res.data.code === "200") {
                that.Success("更换表成功 ！");
              } else {
                that.Error("更换表失败 ！");
              }
            })
            .catch(function(err) {
              // that.Error(err);
            });
          that.isChangeDevice = false;
          that.isDeviceDetailInfo = false;
          /**
           * 是否需要将换表后的一些数据更新到页面上
           */
          let msg = {
            newNo: changeDeviceInfo.newNo,
            index: that.index,
            i: that.i
          };
          bus.$emit("changeDeviceNo", msg);
        })
        .catch(() => {
          that.Info("已取消换表！");
        });
    },

    /**
     * 提示框
     */
    Success(str) {
      this.$alert(String(str), "提示", {
        confirmButtonText: "确定",
        type: "success"
      });
    },
    Info(str) {
      this.$alert(String(str), "提示", {
        confirmButtonText: "确定",
        type: "info"
      });
    },
    Warning(str) {
      this.$alert(String(str), "提示", {
        confirmButtonText: "确定",
        type: "warning"
      });
    },
    Error(str) {
      this.$alert(String(str), "提示", {
        confirmButtonText: "确定",
        type: "error"
      });
    }
  },

  mounted() {
    let that = this;
    bus.$on("getDeviceDetailInfo", msg => {
      that.getDeviceDetailInfo(msg);
    });
  }
};
</script>

<style>
/* 地图 */
.map {
  width: 100%;
  height: 650px;
}

.anchorBL {
  display: none;
}
</style>

<style scoped>
.el-button + .el-button {
  /* margin-left: 20px; */
  margin-left: 25px;
}
</style>
